<template>
  <div class="container">
    <el-card>
      <!-- 表单区域 -->
      <el-form ref="formRefs" :model="form" label-width="80px">
        <el-row>
          <el-col :span="5">
            <el-form-item label="目录名称" prop="iptVal">
              <el-input v-model="queryinfo.tagName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="状态" prop="choiceName">
              <el-select placeholder="请选择状态" v-model="queryinfo.state">
                <el-option
                  v-for="item in form.choiceList"
                  :key="item.value"
                  :label="item.label"
                  :value="item"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-row type="flex">
              <el-col>
                <el-form-item class="searchSmsBtn">
                  <el-button @click="removeSearch">消除</el-button>
                  <el-button type="primary" @click="onSearchBtn"
                    >搜索</el-button
                  >
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="4">
            <el-button
              v-if="this.$route.query.id"
              class="backBtn"
              size="medium"
              type="text"
              icon="el-icon-back"
              @click="$router.push('subjects')"
              >返回学科</el-button
            >
          </el-col>
          <el-col :span="5">
            <el-button
              class="sendCatalog"
              size="medium"
              type="success"
              icon="el-icon-edit"
              @click="sendSmsBtn"
              >新增目录</el-button
            >
          </el-col>
        </el-row>
      </el-form>
      <!-- 数据条数展示 -->
      <div class="data-traffic">
        <i class="el-icon-info font-info"></i>
        <span>数据一共{{ dataList.length }}条</span>
      </div>
      <!-- 表格区域 -->
      <el-table :data="dataList" style="width: 100%">
        <el-table-column type="index" label="序号" width="80">
        </el-table-column>
        <el-table-column prop="subjectName" label="所属学科" width="120">
        </el-table-column>
        <el-table-column prop="tagName" label="标签名称" width="120">
        </el-table-column>
        <el-table-column prop="username" label="创建者"> </el-table-column>
        <el-table-column prop="addDate" label="创建日期">
          <template slot-scope="scope">
            {{
              scope.row.addDate | parseTimeByString('{y}-{m}-{d} {h}:{i}:{s}')
            }}
          </template>
        </el-table-column>
        <el-table-column prop="state" label="状态" width="80">
          <template slot-scope="scope">
            {{ scope.row.state === 1 ? '已启用' : '未启用' }}
          </template>
        </el-table-column>
        <el-table-column prop="address" label="操作">
          <template slot-scope="scope">
            <el-button
              class="corrunt"
              size="mini"
              type="text"
              @click="changeState(scope.row)"
              :class="scope.row.state !== 2 ? 'corrunt' : ''"
              >{{ scope.row.state ? '禁用' : '启用' }}</el-button
            >
            <el-button
              size="mini"
              type="text"
              :class="!scope.row.state ? 'corrunt' : 'active'"
              :disabled="scope.row.state === 1 ? true : false"
              @click="editData(scope.row)"
              >修改</el-button
            >
            <el-button
              size="mini"
              type="text"
              :disabled="scope.row.state === 1 ? true : false"
              :class="!scope.row.state ? 'corrunt' : 'active'"
              @click="deleteData(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页区域 -->
      <div class="pagesBack">
        <page-tool
          @pageSizeChange="onPageSizeChange"
          @pageChange="onPageChange"
          :current-page="queryinfo.page"
          :total="total"
          :page-size="queryinfo.pagesize"
        ></page-tool>
      </div>
    </el-card>
    <!-- 学科目录进入修改标签 -->
    <el-dialog
      v-if="this.$route.query.id"
      title="修改目录"
      :visible.sync="isDialogVisible"
      width="50%"
    >
      <el-form ref="form" :model="editForm" label-width="50px">
        <el-form-item label="目录名称:" label-width="100px">
          <el-input v-model="editForm.editName"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="loadeditSubjectName">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 左侧目录进入修改标签 -->
    <el-dialog
      v-else
      title="修改目录"
      :visible.sync="isDialogVisible"
      width="50%"
    >
      <el-form ref="form" :model="editForm" label-width="50px">
        <el-form-item label="所属学科:" label-width="100px">
          <el-select
            v-model="editForm.subjectID"
            placeholder="请选择所属学科"
            style="width:100%"
          >
            <el-option
              :label="item.subjectName"
              :value="item.id"
              v-for="item in editForm.subjectsList"
              :key="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="目录名称:" label-width="100px">
          <el-input v-model="editForm.editName"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="loadeditSubjectName">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 学科目录进入新增目录 -->
    <two-dialog
      v-if="this.$route.query.id"
      @loadList="getList()"
      @colsePageDialog="isDialogShow = false"
      @cancelDialog="closeDialog"
      :isDialogShow="isDialogShow"
    ></two-dialog>
    <!-- 左侧目录进入新增目录 -->
    <is-dialog
      v-else
      @loadList="getList()"
      @colsePageDialog="isDialogShow = false"
      @cancelDialog="closeDialog"
      :isDialogShow="isDialogShow"
    ></is-dialog>
  </div>
</template>
<script>
import {
  getDataList,
  deleteDataList,
  sendchangeState,
  editSubjectName
} from '@/api/hmmm/tags'
import { parseTimeByString } from '@/filters'
import PageTool from '@/module-manage/components/page-tool'
import Dialog from '@/module-hmmm/components/tags-add'
import TwoDialog from '@/module-hmmm/components/tags-edit'
export default {
  data() {
    return {
      form: {
        iptVal: '',
        choiceName: [],
        choiceList: [
          {
            value: 1,
            label: '已启用'
          },
          {
            value: 0,
            label: '未启用'
          }
        ]
      },
      changeId: '',
      editDataList: {},
      dataList: [],
      queryinfo: {
        page: 1,
        pagesize: 10,
        tagName: '',
        state: null
      },
      total: 0,
      isDialogVisible: false,
      isDialogShow: false,
      editForm: {
        editSubject: [],
        subjectName: '',
        subjectID: '',
        subjectsList: [],
        editName: ''
      }
    }
  },
  components: {
    'page-tool': PageTool,
    'is-dialog': Dialog,
    'two-dialog': TwoDialog
  },
  created() {
    this.getList()
  },
  methods: {
    // 清空
    removeSearch() {
      // this.$refs.formRefs.resetFields();
      this.queryinfo.tagName = ''
      this.queryinfo.state = null
      this.getList()
    },
    // 搜索
    onSearchBtn() {
      this.getList(this.queryinfo)
      this.queryinfo.page = 1
    },
    // 新增目录
    sendSmsBtn() {
      this.isDialogShow = true
    },
    closeDialog(val) {
      this.isDialogShow = val
    },
    // 获取数据
    async getList() {
      const { data } = await getDataList(this.queryinfo)
      this.queryinfo.page = data.page
      this.queryinfo.pagesize = data.pagesize
      this.total = data.counts
      this.dataList = data.items
    },
    // 分页
    onPageSizeChange(newpagesize) {
      this.queryinfo.pagesize = newpagesize
      this.getList()
    },
    onPageChange(newpage) {
      this.queryinfo.page = newpage
      this.getList()
    },
    // 禁用启用
    async changeState(data) {
      this.changeId = data.id
      if (data.state) {
        const { data } = await sendchangeState({
          id: this.changeId,
          state: 0
        })
        this.getList()
      } else {
        const { data } = await sendchangeState({
          id: this.changeId,
          state: 1
        })
        this.getList()
      }
    },
    // 获取修改数据
    async editData(data) {
      const { data: res } = await getDataList(this.queryinfo)
      // console.log(data)
      this.editForm.subjectsList = res.items
      this.editDataList = data
      this.editForm.subjectID = data.subjectName
      this.editForm.editName = data.tagName
      this.isDialogVisible = true
    },
    // 修改数据
    async loadeditSubjectName() {
      try {
        const { data } = await editSubjectName({
          id: this.editDataList.id,
          subjectID: this.editDataList.subjectID,
          tagName: this.editForm.editName
        })
        this.$message.success('修改目录成功')
        this.getList()
        this.editForm.editName = ''
        this.isDialogVisible = false
      } catch (err) {
        console.log(err)
      }
    },
    // 删除数据
    async deleteData(id) {
      const resultConfirm = await this.$confirm('确定删除吗?', '删除提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
      if (resultConfirm === 'confirm') {
        await deleteDataList(id)
        this.getList()
      }
    }
  }
}
</script>

<style scoped lang="less">
.container {
  padding: 16px;
  /deep/.searchSmsBtn {
    position: absolute;
    top: 0;
    left: 0;
    .el-form-item__content {
      margin-left: 12px !important;
    }
  }
  .sendCatalog {
    position: absolute;
    top: 0;
    right: 0;
  }
  .data-traffic {
    padding: 10px 20px;
    margin-bottom: 12px;
    background-color: #f4f4f5;
    span {
      margin-left: 10px;
      color: #909399;
      font-size: 16px;
    }
    .font-info {
      color: #909399;
      font-size: 18px;
    }
  }
  .pagesBack {
    display: flex;
    margin-top: 20px;
    justify-content: flex-end;
  }
  .corrunt {
    color: #94a7ff;
  }
  .active {
    color: #c3c8d8;
  }
  .backBtn {
    position: absolute;
    top: 0;
    right: 125px;
  }
}
</style>
